<template>
  <van-loading v-if="loading" style="display: flex;align-items: center;justify-content: center;height: 80vh" size="24px" vertical>加载中...
  </van-loading>
  <div v-else>
    <div>
      <van-cell title="头像" @click="toEdit('avatarUrl', '头像', user.avatarUrl)" is-link>
        <van-image
            round
            fit="cover"
            width="55px"
            height="55px"
            :src="user.avatarUrl"
        />
      </van-cell>
      <van-cell title="昵称" @click="toEdit('userName', '昵称', user.userName)" is-link :value="user.userName"/>
      <van-cell title="账号" disabled :value="user.userAccount"/>
      <van-cell title="性别" @click="toEdit('gender', '性别', user.gender)" is-link>
        {{ user.gender === 0 ? '男' : user.gender === 1 ? '女' : user.gender === 2 ? '保密' : '' }}
      </van-cell>
      <van-cell title="简介" @click="toEdit('intro', '简介', user.intro)" is-link :value="user.intro"/>
      <van-cell title="标签" @click="toEdit( 'tags', '标签', user.tags ? user.tags.join(',') : '')" is-link>
        <van-tag style="margin-left: 10px" v-for="tag in user.tags" plain size="medium" type="primary">{{ tag }}</van-tag>
      </van-cell>
      <van-cell title="电话" @click="toEdit('phone', '电话', user.phone)" is-link :value="user.phone"/>
      <van-cell title="邮箱" @click="toEdit(  'email', '邮箱', user.email)" is-link :value="user.email"/>
      <van-cell title="微信号" @click="toEdit( 'wxAccount', '微信号', user.wxAccount )" is-link :value="user.wxAccount"/>
      <van-cell title="QQ号" @click="toEdit( 'qqAccount', 'QQ号', user.qqAccount )" is-link :value="user.qqAccount"/>
    </div>
    <van-button style="width: 90%;margin: 10px auto" type="primary" round block @click="outLogin">退出登录</van-button>
    <van-action-sheet
        description="退出后不会删除任何历史数据，下次登录仍可以使用本账号。"
        v-model:show="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="onSelect"
    />
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {showLoadingToast} from "vant/es";
import {closeToast} from "vant";

const show = ref(false);
const actions = [
  {name: '退出登录', color: '#ee0a24'}
];
const loading = ref(true);
const user = ref({})
const router = useRouter();
const toEdit = (key: string, name: string, value: string | number) => {
  router.push({
    path: '/edit',
    query: {
      key: key,
      name: name,
      value: value
    }
  });
}
onMounted(async () => {
  const response = await myAxios.get('/user-manage/currentUser') as any;
  loading.value = false;
  if (response) {
    user.value = {
      ...response.data,
      tags: response.data.tags ? JSON.parse(response.data.tags) : null
    };
  }
});
const outLogin = () => {
  show.value = true;
}
const onSelect = async () => {
  show.value = false;
  showLoadingToast({message: '退出中...', forbidClick: true, duration: 0});
  const res = await myAxios.post('/user-manage/outLogin');
  closeToast();
  if (res) {
    router.push('/login');
  }
}
</script>
